import React, {FC, useEffect, useRef, useState} from "react";
import styles from "./less/progressBar.less"

interface ProgressBarProps {
    progress: number,
    barColor: string,
    name: string
}

let containerWidth = 0
const ProgressBar: FC<ProgressBarProps> = (props) => {
    const containerRef = useRef<HTMLDivElement>(null)
    const [barWidth, setBarWidth] = useState<string>("0px")
    useEffect(() => {
        if (containerRef.current?.clientWidth)
            setBarWidth(`${containerRef.current?.clientWidth * props.progress}px`)
    }, []);
    return (
        <div className={styles["container"]} ref={containerRef}>
            <div className={styles["container-box"]}>
                <span className={styles["progress"]}>{props.progress * 100}%</span>
                <div className={styles["bar"]} style={{width: barWidth, background: props.barColor}}>
                    <span>{props.name}</span>
                </div>
            </div>
        </div>
    )
}
export default ProgressBar